<template>
  <div class="container">
    <el-container class="el-container">
      <el-aside class="left-aside" :width="isCollapse ? '80px' : '230px'">
        <div class="left-title">
          <img
            v-if="!isCollapse"
            style="width: 100%"
            src="../assets/logo.png"
            alt=""
            srcset=""
          />
          <img
            v-else
            style="width: 80%; padding-top: 20px"
            src="../assets/logoS.png"
            alt=""
            srcset=""
          />
          <!-- <h2 class="text_191">智慧大屏系统</h2> -->
        </div>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          background-color="#00A59B"
          active-background="#000"
          text-color="#B6D8CD"
          active-text-color="#fff"
          :router="true"
          :collapse="isCollapse"
        >
          <el-submenu
            v-for="(item, i) in menuList"
            :key="i"
            :index="item.route"
          >
            <template slot="title">
              <div class="el-menu-title">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.title }}</span>
              </div>
            </template>
            <el-menu-item-group
              class="el-menu-items"
              v-if="item.children && item.children.length > 0"
            >
              <el-menu-item
                v-for="(children, j) in item.children"
                :key="j"
                :index="children.route"
                >
                <template slot="title">
                  <div class="el-menu-title">
                    <i :class="children.icon"></i>
                    <span slot="title">{{ children.title }}</span>
                  </div>
                </template>
            </el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main class="app-main">
        <div class="nav-header">
          <img
            src="../assets/icon_com_unfold_right.png"
            @click="isCollapse = !isCollapse"
            alt=""
            srcset=""
          />
          <el-breadcrumb>
            <el-breadcrumb-item v-for="item in routeList" :key="item.name">
              {{ item.title }}
            </el-breadcrumb-item>
          </el-breadcrumb>
          <div class="nav-user">
            <i class="el-icon-user-solid"></i>
            <label>admin</label>
          </div>
        </div>
        <div :class="isSrceen ? 'contentPage' : 'content-page'">
          <router-view class="router-page" />
        </div>
        <p class="footer-info">Copyright@2022金熊猫新媒体科技有限公司</p>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { EventBus } from "../untils/event";
import { mapMutations, mapState } from "vuex";

export default {
  name: "IndexPage",
  data() {
    return {
      isCollapse: false, // 侧边栏展开false/收缩true
      isSrceen: false, // 内部页面是否铺满
      activeIndex: "",
      menuList: [],
    };
  },
  computed: {
    ...mapState({
      breadCrumbList: (state) => state.common.breadCrumbList,
    }),
    getRoutes() {
      return this.$router.getRoutes();
    },
    routeList() {
      const routes = [];

      this.breadCrumbList.forEach((item) => {
        const meta = item.meta || {};

        if (!item.path) return;

        const opts = {
          name: item.name,
          path: item.path,
          title: meta.title || "",
        };

        routes.push(opts);
      });
      return routes;
    },
  },
  watch: {
    $route(newRoute) {
      this.setBreadCrumb(newRoute);
    },
  },

  methods: {
    ...mapMutations(["setBreadCrumb"]),

    getMenuList(menuList) {
      const list = [];
      for (const i in menuList) {
        const item = menuList[i];
        if (!item.meta) continue;
        if (!item.meta.isNav) continue;

        const opt = {};

        // 获取路由节点
        let route = this.getRoutes.find((route) => route.name === item.name);
        // 判断有无子节点
        if (item.children) {
          opt.children = this.getMenuList(item.children);
          // const [isOne, childItem] = this.getIsOneMenu(item.children);
          // // 判断子节点只有一个需要展示
          // if (isOne === true) {
          //   // 获取路由节点
          //   route = this.getRoutes.find(
          //     (route) => route.name === childItem.name
          //   );
          // } else {
          //   // 获取子节点
          //   opt.children = this.getMenuList(item.children);
          // }
        }

        // 设置菜单属性
        opt.title = route.meta.title || "";
        opt.route = route.path;
        opt.icon = route.meta.icon || '-';
        // 添加菜单
        list.push(opt);
      }
      return list;
    },
    // getIsOneMenu(menuList) {
    //   let count = 0;
    //   let menuItem = {};
    //   menuList.forEach((item) => {
    //     if (item.meta.isNav === true) {
    //       count++;
    //       menuItem = item;
    //     }
    //   });
    //   // if (count === 1) return [true, menuItem];
    //   return [false, null];
    // },
  },
  created() {
    EventBus.$on("changeCollapse", (target) => {
      this.isCollapse = target;
    });
    EventBus.$on("changeSrceen", (target) => {
      this.isSrceen = target;
    });
  },
  mounted() {
    const routes = this.$router.options.routes;
    this.menuList = this.getMenuList(routes);
    this.activeIndex = this.$route.path;
    // 初始化面包屑
    this.setBreadCrumb(this.$route);
  },
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .el-container {
    width: 100%;
    height: 100%;
    .left-aside {
      background-color: #00a59b;
      overflow: hidden;
    }
    .el-submenu__title i {
      color: #fff;
      font-size: 16px;
    }
  }
  // .text_191{
  //     overflow-wrap: break-word;
  //     color: rgba(255, 255, 255, 1);
  //     font-size: 26px;
  //     font-family: PingFangSC-Medium;
  //     white-space: nowrap;
  //     line-height: 37px;
  //     text-align: right;
  //     margin: 5px 0 0 37px;
  // }
}
.el-menu {
  width: 100%;
  .el-menu-item:hover {
    background: #00b3a8 !important;
  }
  .el-menu-item.is-active {
    background: #00b3a8 !important;
  }
  .el-submenu__title:hover {
    background-color: #00b3a8 !important;
  }
  .el-menu-item-group__title {
    padding: 0;
  }
}
.el-menu-title {
  text-align: left;
  font-size: 14px;
  .icon-img {
    margin-right: 6px;
  }
}
.el-menu-items {
  text-align: left;
  .el-menu-item {
    line-height: 50px;
  }
}
.app-main {
  background: #e6ebed;
  .nav-header {
    width: 100%;
    height: 60px;
    background: #fff;
    display: flex;
    align-items: center;
    img {
      width: 24px;
      height: 24px;
      margin: 0 20px;
    }
    .nav-user {
      position: absolute;
      right: 20px;
      color: #222;
      font-size: 14px;
      i {
        margin-right: 5px;
        font-size: 18px;
        color: #00a59b;
      }
    }
  }
}
.el-card__body,
.el-main {
  padding: 0 !important;
  position: relative;
}
.content-page {
  margin-top: 20px;
  margin-left: 20px;
  // background: #000;
  width: calc(100% - 80px);
  height: calc(100% - 110px);
}
.contentPage {
  width: 100%;
  height: calc(100% - 61px);
}
.footer-info {
  text-align: center;
  font-size: 14px;
  color: #999;
  line-height: 30px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
</style>
